<!DOCTYPE html>
<html lang="zh" class="h-full bg-gray-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水印宝 - 专业的在线图片水印工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js" defer></script>
    <script src="https://cdn.tailwindcss.com" ></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link id="favicon" rel="icon" type="image/png" href="assets/favicon.ico">
    <script src="js/main.js" defer></script>
</head>
<body class="h-full flex flex-col">
    <div class="flex-grow">
        <nav class="bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-16">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <img id="navbar-logo" class="h-8 w-8" src="assets/logo.png" alt="Watermark Logo">
                        </div>
                        <h1 class="text-2xl font-bold text-white ml-4">水印宝</h1>
                    </div>
                    <div class="flex items-center">
                        <a href="https://github.com/chilohwei/watermark-tool" target="_blank">
                            <i class="fab fa-github text-white text-3xl"></i>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <main>
            <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
                <div class="px-4 py-6 sm:px-0">
                    <div class="border-4 border-dashed border-gray-200 rounded-lg h-48 md:h-96 mb-4 relative">
                        <div id="dropzone" class="w-full h-full flex items-center justify-center cursor-pointer absolute inset-0">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                                <p class="text-gray-500">点击或拖放图片到这里</p>
                                <p class="dropzone-info">支持 JPG/PNG 格式，最大 5MB</p>
                                <input type="file" id="imageInput" accept="image/jpeg,image/png" class="hidden" />
                            </div>
                        </div>
                        <canvas id="imageCanvas" class="hidden w-full h-full object-contain"></canvas>
                        <button id="changeImageButton" class="hidden absolute bottom-2 right-2 text-sm text-gray-500 underline">更换图片</button>
                    </div>
                    <div id="feedback" class="fixed bottom-4 right-4 hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded shadow-lg" role="alert">
                        <span class="block sm:inline" id="feedbackMessage"></span>
                    </div>
                    <div class="mt-5 md:mt-0 md:col-span-2">
                        <form class="ant-form ant-form-horizontal ant-form-default form-container">
                            <div class="form-row grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div class="form-item col-span-1 lg:col-span-4">
                                    <label for="watermarkText">水印文字</label>
                                    <input type="text" name="watermarkText" id="watermarkText" class="ant-input" value="仅供XXX使用" title="请输入水印文字">
                                </div>
                                <div class="form-item col-span-1 lg:col-span-2">
                                    <label for="watermarkColor">水印颜色</label>
                                    <div class="flex items-center">
                                        <input type="color" name="watermarkColor" id="watermarkColor" value="#FFFFFF" class="color-picker" title="选择水印颜色">
                                        <input type="text" name="watermarkColorText" id="watermarkColorText" class="ant-input ml-2" value="#FFFFFF" title="输入水印颜色代码">
                                    </div>
                                </div>
                                <div class="form-item col-span-1 lg:col-span-2">
                                    <label for="watermarkStyle">水印样式</label>
                                    <div class="flex items-center">
                                        <div class="mr-4">
                                            <input type="radio" id="striped" name="watermarkStyle" value="STRIPED" checked>
                                            <label for="striped" title="斜向重复">斜向重复</label>
                                        </div>
                                        <div>
                                            <input type="radio" id="central" name="watermarkStyle" value="CENTRAL">
                                            <label for="central" title="居中">居中</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-item col-span-1 lg:col-span-1">
                                    <label for="watermarkAngle">水印旋转角度</label>
                                    <div class="flex items-center">
                                        <input type="range" name="watermarkAngle" id="watermarkAngle" min="0" max="360" value="335" class="ant-slider" title="调整水印的旋转角度">
                                        <span id="angleValue" class="text-sm text-gray-500">335°</span>
                                    </div>
                                </div>
                                <div class="form-item col-span-1 lg:col-span-1">
                                    <label for="watermarkOpacity">水印透明度</label>
                                    <div class="flex items-center">
                                        <input type="range" name="watermarkOpacity" id="watermarkOpacity" min="0" max="1" step="0.1" value="0.2" class="ant-slider" title="调整水印的透明度">
                                        <span id="opacityValue" class="text-sm text-gray-500">0.2</span>
                                    </div>
                                </div>
                                <div class="form-item col-span-1 lg:col-span-1">
                                    <label for="watermarkSize">水印字体大小</label>
                                    <div class="flex items-center">
                                        <input type="range" name="watermarkSize" id="watermarkSize" min="10" max="100" value="16" class="ant-slider" title="调整水印的字体大小">
                                        <span id="sizeValue" class="text-sm text-gray-500">16</span>
                                    </div>
                                </div>
                                <div class="form-item col-span-1 lg:col-span-1">
                                    <label for="watermarkSpace">水印间距</label>
                                    <div class="flex items-center">
                                        <input type="range" name="watermarkSpace" id="watermarkSpace" min="0" max="100" value="24" class="ant-slider" title="调整水印的间距">
                                        <span id="spaceValue" class="text-sm text-gray-500">24</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-buttons px-4 py-3 bg-gray-50 sm:px-6 text-right">
                                <button type="button" id="applyWatermark" class="ant-btn ant-btn-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    应用水印
                                </button>
                                <button type="button" id="saveImage" class="ant-btn ant-btn-success ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                    保存图片
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Why Choose Us Section -->
            <section class="why-choose-us bg-white py-12">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 class="text-3xl font-extrabold text-gray-900 text-center">为什么选择我们？</h2>
                    <div class="mt-10">
                        <div class="flex flex-wrap justify-center">
                            <div class="p-4 md:w-1/3 flex">
                                <div class="flex-grow pl-6">
                                    <h3 class="text-lg font-medium text-indigo-600">本地处理</h3>
                                    <p class="leading-relaxed text-base">图片处理全部在本地进行，不会上传到服务器，确保您的隐私安全。</p>
                                </div>
                            </div>
                            <div class="p-4 md:w-1/3 flex">
                                <div class="flex-grow pl-6">
                                    <h3 class="text-lg font-medium text-indigo-600">开源免费</h3>
                                    <p class="leading-relaxed text-base">我们提供开源免费的服务，您可以无限制地使用所有功能。</p>
                                </div>
                            </div>
                            <div class="p-4 md:w-1/3 flex">
                                <div class="flex-grow pl-6">
                                    <h3 class="text-lg font-medium text-indigo-600">易于使用</h3>
                                    <p class="leading-relaxed text-base">我们简洁直观的用户界面，让您可以快速上手并处理图片。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <footer class="bg-gray-800 text-white py-4 mt-auto">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p>© 2024 水印宝 版权所有</p>
        </div>
    </footer>
    <!-- Add Umami Analytics-->
    <script defer src="https://tongji.chiloh.com/random-string.js" data-website-id="16abb3b5-7eae-40b1-8036-1260edc148d1"></script>
</body>
</html>
